<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>万圣节礼物</title>
    <style>
      /* 保持原有样式不变 */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Arial", sans-serif;
      }

      body {
        background-color: rgba(229, 235, 243);
        min-height: 100vh;
        overflow: hidden;
        position: relative;
      }

      .gift-modal {
        background-color: #ff7a00;
        width: 90%;
        max-width: 500px;
        padding: 2rem;
        border-radius: 20px;
        text-align: center;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
      }

      .modal-header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
      }

      .icon {
        font-size: 2rem;
        margin-right: 0.5rem;
      }

      .title {
        color: #fff;
        font-size: 2rem;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
      }

      .content {
        color: #fff;
        font-size: 1.1rem;
        margin-bottom: 2rem;
      }

      .btn-group {
        display: flex;
        gap: 1rem;
        justify-content: center;
      }

      button {
        padding: 0.8rem 2rem;
        border: none;
        border-radius: 30px;
        font-size: 1rem;
        font-weight: bold;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .open-btn {
        background-color: #6a0dad;
        color: white;
      }

      .cancel-btn {
        background-color: #fff;
        color: #ff7a00;
      }

      button:hover {
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .floating-box {
        width: 250px;
        height: 150px;
        position: absolute;
        border-radius: 12px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
        z-index: 5;
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        padding: 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }

      .floating-box:hover {
        transform: scale(1.05) rotate(2deg);
        z-index: 6;
      }

      .box-row1 {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 0.6rem;
        border-radius: 8px;
      }

      .box-row2 {
        flex: 1;
        display: flex;
        align-items: center;
        padding: 0 0.6rem;
        border-radius: 8px;
      }

      .box-logo {
        font-size: 1.4rem;
        margin-right: 0.6rem;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
      }

      .box-name {
        font-size: 1rem;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      }

      .box-text {
        font-size: 0.9rem;
        line-height: 1.3;
        font-weight: 500;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
      }

      .music-player {
        display: none;
      }

      /* 新增：音频播放提示（若自动播放失败） */
      .audio-prompt {
        position: fixed;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 0.8rem 1.5rem;
        border-radius: 30px;
        z-index: 20;
        display: none;
      }
    </style>
  </head>
  <body>
    <!-- 初始弹窗 -->
    <div class="gift-modal">
      <div class="modal-header">
        <span class="icon">🎃</span>
        <span class="title">万圣节礼物</span>
      </div>
      <div class="content">您有一份万圣节礼物，确定要打开吗？</div>
      <div class="btn-group">
        <button class="open-btn">打开礼物</button>
        <button class="cancel-btn">稍后再说</button>
      </div>
    </div>

    <!-- 音乐播放器 -->
    <audio class="music-player" id="bgMusic" preload="auto" loop>
      <source
        src="https://sf5-hl-cdn-tos.douyinstatic.com/obj/ies-music/7499771397531503370.mp3"
        type="audio/mpeg"
      />
      <!-- 备用链接（若原链接失效） -->
      <source
        src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3"
        type="audio/mpeg"
      />
    </audio>

    <!-- 音频播放提示（自动播放失败时显示） -->
    <div class="audio-prompt" id="audioPrompt">点击此处播放背景音乐 🔊</div>

    <script>
      // 获取元素
      const modal = document.querySelector(".gift-modal");
      const openBtn = document.querySelector(".open-btn");
      const cancelBtn = document.querySelector(".cancel-btn");
      const bgMusic = document.getElementById("bgMusic");
      const audioPrompt = document.getElementById("audioPrompt");
      let isSpawning = false;
      let boxCount = 0;
      const maxBoxCount = 300;

      // 弹窗名字库
      const boxNames = [
        "南瓜精灵",
        "幽灵使者",
        "女巫祝福",
        "吸血鬼礼",
        "骷髅信使",
        "蝙蝠为伴",
        "糖果仙子",
      ];

      // 弹窗文本库
      const boxTexts = [
        "万圣节快乐！🍬",
        "南瓜灯的祝福～",
        "保持好心情",
        "今晚好运不断！",
        "你超棒的！",
        "期待下次见面",
        "保持微笑呀",
        "我想你了",
      ];

      // 图标库
      const boxLogos = ["🎃", "👻", "😈", "🦇", "💀", "🍬", "🕷️"];

      // 配色方案
      const colorSchemes = [
        {
          row1Bg: "rgba(227, 242, 253, 0.9)",
          row2Bg: "rgba(240, 247, 254, 0.9)",
          logo: "#3b82f6", // 补充logo颜色（原代码缺失）
        },
        {
          row1Bg: "rgba(224, 247, 250, 0.9)",
          row2Bg: "rgba(240, 252, 255, 0.9)",
          logo: "#06b6d4",
        },
        {
          row1Bg: "rgba(254, 239, 228, 0.9)",
          row2Bg: "rgba(254, 249, 244, 0.9)",
          logo: "#f97316",
        },
        {
          row1Bg: "rgba(240, 235, 248, 0.9)",
          row2Bg: "rgba(249, 246, 252, 0.9)",
          logo: "#a855f7",
        },
      ];

      // 随机获取配色
      function getRandomColorScheme() {
        return colorSchemes[Math.floor(Math.random() * colorSchemes.length)];
      }

      // 随机位置（适配250×150px弹窗）
      function getRandomPosition() {
        const maxX = window.innerWidth - 250; // 修正弹窗宽度
        const maxY = window.innerHeight - 150; // 修正弹窗高度
        const x = Math.floor(Math.random() * maxX);
        const y = Math.floor(Math.random() * maxY);
        return { x, y };
      }

      // 先快后慢速度函数
      function easeOutCubic(t) {
        return 1 - Math.pow(1 - t, 3);
      }

      // 创建弹窗
      function createFloatingBox() {
        if (!isSpawning || boxCount >= maxBoxCount) return;

        const box = document.createElement("div");
        box.className = "floating-box";
        const colorScheme = getRandomColorScheme();

        const position = getRandomPosition();
        box.style.left = `${position.x}px`;
        box.style.top = `${position.y}px`;
        box.style.transform = `rotate(${Math.random() * 8 - 4}deg)`;

        const randomLogo =
          boxLogos[Math.floor(Math.random() * boxLogos.length)];
        const randomName =
          boxNames[Math.floor(Math.random() * boxNames.length)];
        const randomText =
          boxTexts[Math.floor(Math.random() * boxTexts.length)];

        box.innerHTML = `
          <div class="box-row1" style="background-color: ${colorScheme.row1Bg}">
            <span class="box-logo" style="color: ${colorScheme.logo}">${randomLogo}</span>
            <span class="box-name" style="color: black">李加昕</span>
          </div>
          <div class="box-row2" style="background-color: ${colorScheme.row2Bg}">
            <span class="box-text" style="color:black">${randomText}</span>
          </div>
        `;

        document.body.appendChild(box);
        boxCount++;

        const t = boxCount / maxBoxCount;
        const speedFactor = easeOutCubic(t);
        const interval = 100 + (800 - 100) * speedFactor;
        setTimeout(createFloatingBox, interval);
      }

      // 播放音频的核心函数（强制绑定用户交互）
      function playAudio() {
        bgMusic
          .play()
          .then(() => {
            // 播放成功，隐藏提示
            audioPrompt.style.display = "none";
          })
          .catch((e) => {
            // 播放失败，显示提示让用户手动点击
            console.log("自动播放失败，需用户手动触发：", e);
            audioPrompt.style.display = "block";
          });
      }

      // 打开礼物按钮点击事件
      openBtn.addEventListener("click", () => {
        modal.style.display = "none";
        isSpawning = true;
        createFloatingBox();
        // 立即播放音频（此时点击事件未结束，属于用户交互）
        playAudio();
      });

      // 若自动播放失败，允许用户点击提示播放
      audioPrompt.addEventListener("click", () => {
        playAudio();
      });

      // 取消按钮
      cancelBtn.addEventListener("click", () => {
        alert("礼物会为你保留哦！");
      });

      // 页面加载完成后，先加载音频（提升后续播放成功率）
      window.addEventListener("load", () => {
        bgMusic.load();
      });
    </script>
  </body>
</html>
